<template>
	<view class="page">
		<view class="colorVersion">
			<view class="colorVersionHead">
				<view class="colorVersionTitle">
					<view class="colorVersionImage">
						<image src="../../static/newsPaper/kb_index_qs.png" mode="aspectFit" style="width: 34rpx; height: 34rpx;"></image>
					</view>
					<view class="colorVersionText">
						<view class="colorVersionName">彩色版</view>
						<view class="colorVersionNumber">{{ newsPaperTitle }}</view>
					</view>
					 <picker @change="selectVersionNumber" :value="colorVersionIndex" :range="colorVersionArray">
						<view class="colorVersionMore">
							更多期数
						</view>
					 </picker>
				</view>
				<view class="colorVersionDescribe">
					精选优惠 向左滑动 查看更多 点击放大阅读
				</view>				
			</view>
			<view class="colorVersionPaper">
				<!-- 轮播图 start -->
				<scroll-view scroll-x="true" class="colorVersionPaperSwiper">
					<view class="colorVersionPageSwiperItem" v-for="(pageItem, paperImagePreviewIndex) in colorNewsPaperList" :key="pageItem.ID">
						<image :src="$getImgUrl(pageItem.imgpath)" class="colorVersionPaperImage" mode="aspectFill" @click="paperImagePreview(paperImagePreviewIndex)"></image>
					</view>
				</scroll-view>
				<!-- 轮播图 end -->
			</view>
		</view>
		
		<view v-if="isShowAd" @click="goHome">
			<image :src="adImageUrl" mode="aspectFit" class="adImage"></image>
		</view>
		
		
		<view class="blackAndWhite">
			<view class="blackAndWhiteHead">
				<view class="blackAndWhiteTitle">
					<view class="blackAndWhiteTitleImage">
						<image src="../../static/newsPaper/kb_index_qs.png" mode="aspectFit" style="width: 34rpx; height: 34rpx;"></image>
					</view>
					<view class="blackAndWhiteTitleText">
						<view class="blackAndWhiteTitleName">黑白版</view>
						<view class="blackAndWhiteTitleNumber">{{ newsPaperTitle }}</view>
					</view>
				</view>
				<view class="blackAndWhiteDescribe">分类信息 搜索阅读 一秒找到你想要的...</view>
			</view>
			<view class="blackAndWhiteColumn">
				<view class="blackAndWhiteColumnItem" v-for="columnItem in blackColumnList" :key="columnItem.ID" @click="gotoColumnPage(columnItem)">
					<view class="blackAndWhiteColumnItemImage">
						<image :src="$getImgUrl(columnItem.imgpath)" mode="aspectFit" class="blackAndWhiteColumnItemImage"></image>
					</view>
					<view class="blackAndWhiteColumnItemText">{{ columnItem.ClassName }}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorVersionId: 0,
				isShowAd: 1,
				adImageUrl: this.$getImgUrl('/UpLoadFiles/BImg/kbsyggw.jpg'),
				newsPaperId: 0,
				newsPaperTitle:　'',
				colorNewsPaperList: [],
				blackColumnList: [],
				newsPaperWeek: '',
				colorVersionList:[],
				colorVersionArray: [],
				colorVersionIndex: 0,
			}
		},
		async onLoad() {
			await this.$onLaunched;
			this.getNewsPaper()
			this.getNewsPaperNumber()
		},
		methods: {
			getNewsPaper(){
				this.$api.getNewsPaper({ id:this.colorVersionId, cid: getApp().globalData.cityId })
				.then(res => {
					console.log(res)
					this.isShowAd = res.data.KbIndexShow
					this.adImageUrl = this.$getImgUrl(res.data.KbIndexPic)
					this.newsPaperTitle = res.data.Name
					this.newsPaperId = res.data.NewPaperID
					this.colorNewsPaperList = res.data.CaiNewPaper
					this.newsPaperWeek = res.data.DateWeek
					this.blackColumnList = res.data.LanMu
					this.colorVersionId = res.data.NewPaperID
					uni.setNavigationBarTitle({
					  title: this.newsPaperWeek
					})
					
				})
			},
			getNewsPaperNumber(){
				this.$api.getNewsPaperNumber({ cid: getApp().globalData.cityId })
				.then(res => {
					console.log(res)
					this.colorVersionList = res.data
					res.data.forEach(el =>{
						this.colorVersionArray.push(el.Name)
					})
				})
			},
			selectVersionNumber(e){
				console.log(e.target)
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.colorVersionIndex = e.target.value
				this.colorVersionId = this.colorVersionList[e.target.value].ID
				this.getNewsPaper()
			},
			paperImagePreview(itemIndex){
				let paperimages = []
				this.colorNewsPaperList.forEach((tupianItem) =>{
					paperimages.push(this.$getImgUrl(tupianItem.imgpath))
				})
				uni.previewImage({
					current:itemIndex,
					urls:paperimages,
					indicator: 'number',
				})
			},
			gotoColumnPage(columnItem){
				let {imgpath,...columnItems} = columnItem
				columnItems = Object.assign(columnItems,{NewsId:this.colorVersionId})
				console.log(columnItems)
				uni.navigateTo({
					url:'../newsPaperList/newsPaperList?parameter=' + encodeURIComponent(JSON.stringify(columnItems))
					
				})
			},
			goHome(){
				uni.switchTab({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style scoped>
@import url('readnewspaper.css');
</style>
